<template>
    <div>
        <div class="customer-list">
            <div class="customer-list-search">
                <div class="left"><input type="text" placeholder="请输入用户名" value="" v-model="keyword"></div>
                <div class="right" @click="getList()"><a>搜索</a></div>
            </div>
            <div class="customer-list-nav">
                <span :class="pxtype==0?'active':''"  @click="changeTab(0)">默认排序</span>
                <span :class="pxtype==1?'active':''"  @click="changeTab(1)">按购买总额</span>
                <span :class="pxtype==2?'active':''"  @click="changeTab(2)">按购买次数</span>
                <span :class="pxtype==3?'active':''"  @click="changeTab(3)">关注时间</span>
            </div>
            <div class="customer-number">共{{salenumber}}位客户&nbsp;&nbsp;（近7天购买人数：{{sevenusernumber}}）</div>
            <ul>
                <li v-for="(item,index) in list">
                    <div class="customer-list_user active">
                        <div class="left"><img :src="item.avatar"><p><span class="s1">{{item.nickname}} </span></p></div>
                        <router-link :to="'/myzoe/clientdiscount/'+item.userid" class="discount">折扣</router-link>
                        <a class="right" @click="clientelefj(item.userid)" v-if="item.fengjinstatus==1">封禁</a>
                        <a class="right" @click="clientelefj(item.userid)" v-else>解封</a>
                    </div>
                    <div class="number">
                        <p class="p1">购买数量：<br>{{item.buynumber}}篇</p>
                        <p class="p2">购买总额：<br>￥{{item.buymoney}}
                            <!--<img style="width: 12px;height: 12px" src="../../assets/img/money_icon.png"/>-->
                        </p>
                        <p class="p3">最近购买时间：<br>{{item.lastbuydate}}</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    var timer;
    export default {
        name: "",
        data(){
            return {
                pxtype:0,
                salenumber:0,
                sevenusernumber:0,
                keyword:"",
                list:[]
            }
        },
        mounted(){
            this.getList()
        },
        methods:{
            //封禁/解封
            clientelefj(id){
                var that=this;
                that.request1.post1({
                    url: that.Url + "api/user.index/clientelefj",
                    params: {fengjinid:id},
                    success: function (res) {
                        console.log(res)
                        if (res.data.code == 1) {
                            that.$toast.success("操作成功");
                            timer=setTimeout(function () {
                                that.getList()
                            },2000);
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            },
            changeTab(num){
                this.pxtype=num;
                this.getList();
            },
            getList(){
                var that=this;
                that.request1.post1({
                    url: that.Url + "api/user.index/myClientele",
                    params: {pxtype:that.pxtype, nickname:that.keyword},
                    success: function (res) {
                        console.log(res)
                        if (res.data.code == 1) {
                            that.salenumber=res.data.data.salenumber;
                            that.sevenusernumber=res.data.data.sevenusernumber;
                            that.list=res.data.data.userlist;
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .customer-list-search {
        display: -webkit-box;
        background: #fff;
        height: 40px;
        width: 100%;
        z-index: 1;
        border-top: .5px solid #efefef;
        box-shadow: 0 3px 10px rgba(115,117,154,.1);
    }
    .customer-list-search .left {
        -webkit-box-flex: 1;
        overflow: hidden;
        display: -webkit-box;
        left: 0;
        position: relative;
    }
    .customer-list-search .left input {
        display: block;
        -webkit-box-flex: 1;
        font-size: 13px;
        height: 20px;
        line-height: 20px;
        background: #efeff4;
        padding: 5px 15px;
        border-radius: 100px;
        margin: 5px 10px;
    }
    .customer-list-search .right {
        width: 60px;
    }
    .customer-list-search .right a {
        display: block;
        padding-left: 10px;
        line-height: 40px;
        font-size: 14px;
    }
    .customer-list-nav {
        height: 45px;
        background: #fff;
        border-top: .5px solid #efeff4;
        display: -webkit-box;
        padding: 0 10px;
    }
    .customer-list-nav span {
        display: block;
        -webkit-box-flex: 1;
        text-align: center;
        line-height: 45px;
        width: 100%;
    }
    .customer-list-nav span.active {
        border-bottom: 3px solid #fa5d4e;
    }
    .customer-number {
        color: #999;
        font-size: 13px;
        padding-left: 10px;
        margin-top: 15px;
        margin-bottom: 10px;
    }
    .customer-list ul li {
        display: block;
        margin-bottom: 5px;
    }
    .customer-list ul li .customer-list_user {
        background: #fff;
        height: 42px;
        padding-top: 8px;
        padding-left: 15px;
    }
    .customer-list ul li .customer-list_user .left {
        display: block;
        float: left;
    }
    .customer-list ul li .customer-list_user .left img {
        display: block;
        float: left;
        width: 32px;
        height: 32px;
        border-radius: 40px;
    }
    .customer-list ul li .customer-list_user .left p {
        display: block;
        float: left;
        padding-top: 2px;
        padding-left: 5px;
    }
    .customer-list ul li .customer-list_user.active .left p .s1 {
        display: block;
        line-height: 16px;
    }
    .customer-list ul li .customer-list_user.active .right {
        display: block;
        float: right;
        width: 65px;
        height: 30px;
        border: .5px solid #e4e4e4;
        font-size: 13px;
        border-radius: 4px;
        text-align: center;
        line-height: 30px;
        margin-right: 15px;
    }
    .customer-list ul li .customer-list_user.active .discount{
        position: absolute;
        right: 88px;
        width: 48px;
        height: 30px;
        border: .5px solid #e4e4e4;
        text-align: center;
        line-height: 30px;
    }
    .customer-list ul li .number {
        display: -webkit-box;
        height: 45px;
        background: #fff;
        border-top: .5px solid #efeff4;
        padding: 0 15px;
    }
    .customer-list ul li .number p {
        -webkit-box-flex: 1;
        font-size: 12px;
        color: #999;
        line-height: 16px;
        padding-top: 5px;
    }
    .customer-list ul li .number .p3 {
        width: 82px;
    }
</style>